<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

    <style>
        .div1 {
            font-size: 0.16rem;
        }

        .div2 {
            width: 100px;
            height: 100px;
            border: 1px solid #333;
        }

        .div3 {
            width: 1rem;
            height: 1rem;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <div>我是，你大爷！</div>

    <div style="width: 25%; height: 10px; border: 1px solid #333;"></div>
    <div style="width: 160px; height: 10px; border: 1px solid #333;"></div>
    <div style="width: 1.6rem; height: 10px; border: 1px solid #333;"></div>

    <br>
    <div class="div1">我是，你大爷！</div>
    <br>
    <div class="div2">我是，你大爷！</div>
    <br>
    <div class="div3">我是，你大爷！</div>

    <script>
        var win = window;
        var dpr = win.devicePixelRatio || 1;
        console.log('win.devicePixelRatio', win.devicePixelRatio);

        !function (e, t) {
            var n = t.documentElement,
                d = e.devicePixelRatio || 1;

            function i() {
                var w = n.clientWidth;
                w = w >= 414 ? 414 : w /* <= 320 ? 375 : w */;
                var e = w / 3.75;
                n.style.fontSize = e + "px";
            }

            if (
                function e() {
                    t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
                }(),
                i(),
                e.addEventListener("resize", i),
                e.addEventListener(
                    "pageshow",
                    function (e) {
                        e.persisted && i()
                    }
                ),
                2 <= d
            ) {
                var o = t.createElement("body"),
                    a = t.createElement("div");

                a.style.border = ".5px solid transparent";
                o.appendChild(a);
                n.appendChild(o);
                1 === a.offsetHeight && n.classList.add("hairlines");
                n.removeChild(o);
            }
        }(window, document)
    </script>

    <script>
        !function (e, t) {
            var n = t.documentElement,
                d = e.devicePixelRatio || 1;
            function i() {
                var e = n.clientWidth / 3.75;
                n.style.fontSize = e + "px"
            }
            if (
                function e() {
                    t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
                }(),
                i(),
                e.addEventListener("resize", i), e.addEventListener("pageshow",
                    function (e) {
                        e.persisted && i()
                    }),
                2 <= d
            ) {
                var o = t.createElement("body"),
                    a = t.createElement("div");
                a.style.border = ".5px solid transparent",
                    o.appendChild(a),
                    n.appendChild(o),
                    1 === a.offsetHeight && n.classList.add("hairlines"),
                    n.removeChild(o)
            }
        }(window, document)
    </script>
</body>

</html>